import React, { useState } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DownOutlined,
} from "@ant-design/icons";
import { Layout, Button, theme, Dropdown, Space } from "antd";
import "./style/index.scss";
import { Outlet } from "react-router-dom";
import MenuList from "./MenuList";
import { Image } from "antd";
import bg from "@/assets/bg.jpg";
import Breadcrumbs from "./Breadcrumbs";
import { useNavigate } from "react-router-dom";

const { Header, Sider, Content } = Layout;
const App = () => {
  const navigate = useNavigate();
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const nickName =
    (localStorage.getItem("userInfo") && JSON.parse(localStorage.getItem("userInfo")).userName) || "默认昵称";
  const items = [
    {
      key: "1",
      label: <div onClick={() => goLoginOut()}>退出登录</div>,
    },
  ];
  const goLoginOut = () => {
    localStorage.clear();
    navigate("/login");
  };
  return (
    <Layout className="demo-layout">
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <MenuList />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div className="breadcrumbs">
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: "16px",
                width: 64,
                height: 64,
              }}
            />
            <Breadcrumbs />
          </div>
          <div className="userInfo">
            <Image src={bg} />
            <div>
              <Dropdown
                menu={{
                  items,
                }}
              >
                <div onClick={(e) => e.preventDefault()}>
                  <Space>
                    {nickName}
                    <DownOutlined />
                  </Space>
                </div>
              </Dropdown>
            </div>
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
            height: "100vh",
            overflow: "auto",
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};
export default App;
